<!--<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">-->

<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('City')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <div class='control-relative'><input id="c-city" class="form-control" data-toggle="city-picker" name="row[city]" type="text"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('Weilan')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <textarea id="c-weilan" class="form-control " rows="5" name="row[weilan]" cols="50"></textarea>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="form-group layer-footer">-->
<!--        <label class="control-label col-xs-12 col-sm-2"></label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>-->
<!--            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>-->
<!--        </div>-->
<!--    </div>-->
<!--</form>-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <meta http-equiv="X-UA-Compatible" content="ie=edge">-->
<!--    <title>编辑几何图形</title>-->
<!--</head>-->
<script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 80%;
        position: relative;
    }
    #toolControl {
        position: absolute;
        top: 60px;
        left: 0px;
        right: 0px;
        margin: auto;
        width: 126px;
        z-index: 1001;
    }
    .toolItem {
        width: 30px;
        height: 30px;
        float: left;
        margin: 1px;
        padding: 4px;
        border-radius: 3px;
        background-size: 30px 30px;
        background-position: 4px 4px;
        background-repeat: no-repeat;
        box-shadow: 0 1px 2px 0 #E4E7EF;
        background-color: #ffffff;
        border: 1px solid #ffffff;
    }
    .toolItem:hover {
        border-color: #789CFF;
    }
    .active {
        border-color: #D5DFF2;
        background-color: #D5DFF2;
    }

    #delete {
        background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/delete.png');
    }
    #split {
        background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/split.png');
    }
    #union {
        background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/union.png');
    }
</style>

<body onload="initMap()">
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('City')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class='control-relative'><input id="c-city" class="form-control" data-toggle="city-picker" name="row[city]" type="text"></div>
        </div>
    </div>
    <div class="form-group" style="display: none">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weilan')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-weilan" class="form-control " rows="5" name="row[weilan]" cols="50"></textarea>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<div id="container"></div>
<div id="toolControl">
    <div class="toolItem" id="delete" onclick="editor.delete();" title="删除"></div>
    <!--    <div class="toolItem" id="split" onclick="editor.split();" title="拆分"></div>-->
    <!--    <div class="toolItem" id="union" onclick="editor.union();" title="合并"></div>-->
</div>
<!--<div>-->
<!--    单选：鼠标左键点击图形<br/>-->
<!--    多选：按下ctrl键后点击多个图形<br/>-->
<!--    删除：选中图形后按下delete键或点击删除按钮可删除图形<br/>-->
<!--    编辑：选中图形后出现编辑点，拖动编辑点可移动顶点位置，双击实心编辑点可删除顶点<br/>-->
<!--    拆分：选中单个多边形后可绘制拆分线，拆分线绘制完成后自动进行拆分<br/>-->
<!--    合并：选中多个相邻多边形后可进行合并，飞地形式的多边形不支持合并<br/>-->
<!--    中断：按下esc键可中断当前操作，点选的图形将取消选中，编辑过程将中断-->
<!--</div>-->
<!--<div id="info">当前点击坐标为：<span id="position">-->
<script type="text/javascript">
    var map, editor;

    function initMap() {
        // 初始化地图
        map = new TMap.Map("container", {
            zoom: 10, // 设置地图缩放级别
            center: new TMap.LatLng(40.04019000341765, 116.27446815226199) // 设置地图中心点坐标
        });
        //绑定点击事件
        map.on("click",function(evt){
            var  weilan = $('#c-weilan').val();
            if(weilan!=''){
                return false
            }

            var lat = evt.latLng.getLat().toFixed(6);
            var lng = evt.latLng.getLng().toFixed(6);
            // position.innerHTML = lat + "," + lng;
            var boundingBox = calculateBoundingBox( { latitude: lat, longitude: lng });
            console.log(boundingBox);
            var simplePath = [
                new TMap.LatLng(boundingBox.east.latitude, boundingBox.east.longitude),

                new TMap.LatLng(boundingBox.south.latitude, boundingBox.south.longitude),

                new TMap.LatLng(boundingBox.west.latitude, boundingBox.west.longitude),
                new TMap.LatLng(boundingBox.north.latitude, boundingBox.north.longitude),
            ];

            var addstr = boundingBox.east.latitude+','+ boundingBox.east.longitude+'|'+boundingBox.south.latitude+','+boundingBox.south.longitude+'|'+boundingBox.west.latitude+','+boundingBox.west.longitude+'|'+boundingBox.north.latitude+','+boundingBox.north.longitude+"|";
            $('#c-weilan').val(addstr)

            // 初始化几何图形及编辑器
            editor = new TMap.tools.GeometryEditor({
                map, // 编辑器绑定的地图对象
                overlayList: [ // 可编辑图层
                    {
                        overlay: new TMap.MultiPolygon({
                            map,
                            styles: {
                                highlight: new TMap.PolygonStyle({
                                    color: 'rgba(255, 255, 0, 0.6)'
                                })
                            },
                            geometries: [
                                {
                                    paths: simplePath
                                },
                                // {
                                //     paths: holeyPath
                                // },
                            ]
                        }),
                        id: 'polygon',
                        selectedStyleId: 'highlight'
                    }
                ],
                actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
                activeOverlayId: 'polygon', // 激活图层
                selectable: true, // 开启点选功能
                snappable: true // 开启吸附
            });
            // 监听删除、修改、拆分、合并完成事件
            let evtList = ['delete', 'adjust', 'split', 'union'];
            evtList.forEach(evtName => {
                editor.on(evtName + '_complete', evtResult => {
                    console.log(evtName);
                    if(evtName=='delete'){
                        console.log(12313123)
                        $('#c-weilan').val("")

                    }
                    if(evtName=='adjust'){
                        console.log(evtResult)
                        var weilan = '';
                        for (i=0;i<evtResult.paths.length;i++){
                            var address = evtResult.paths[i].lat+','+evtResult.paths[i].lng
                            weilan = weilan+address+'|'
                        }

                        $('#c-weilan').val(weilan)

                    }
                });
            });

            // 监听拆分失败事件，获取拆分失败原因
            editor.on('split_fail', (res) => {
                alert(res.message);
            });
            // 监听合并失败事件，获取合并失败原因
            editor.on('union_fail', (res) => {
                alert(res.message);
            });
        })
        // var simplePath = [
        //     new TMap.LatLng(40.04051164600918, 116.27488518619089),
        //     new TMap.LatLng(40.040943635857445, 116.27804611629756),
        //     new TMap.LatLng(40.03951759379146, 116.2783762087081),
        //     new TMap.LatLng(40.03891287066983, 116.2752049655744)
        // ];
        // var holeyPath = [
        //     [
        //         new TMap.LatLng(40.0415122389407, 116.27144427159294),
        //         new TMap.LatLng(40.03854281391625, 116.27218697924695),
        //         new TMap.LatLng(40.03891287066983, 116.2752049655744),
        //         new TMap.LatLng(40.04191838125587, 116.27460372613496)
        //     ],
        //     [
        //         new TMap.LatLng(40.04108804322408, 116.27230486920075),
        //         new TMap.LatLng(40.039472465232336, 116.27267032855252),
        //         new TMap.LatLng(40.03972518377873, 116.2748159283218),
        //         new TMap.LatLng(40.04137685760844, 116.2744386798397)
        //     ]
        // ];

        // 初始化几何图形及编辑器
        // editor = new TMap.tools.GeometryEditor({
        //     map, // 编辑器绑定的地图对象
        //     overlayList: [ // 可编辑图层
        //         {
        //             overlay: new TMap.MultiPolygon({
        //                 map,
        //                 styles: {
        //                     highlight: new TMap.PolygonStyle({
        //                         color: 'rgba(255, 255, 0, 0.6)'
        //                     })
        //                 },
        //                 geometries: [
        //                     {
        //                         paths: simplePath
        //                     },
        //                     // {
        //                     //     paths: holeyPath
        //                     // },
        //                 ]
        //             }),
        //             id: 'polygon',
        //             selectedStyleId: 'highlight'
        //         }
        //     ],
        //     actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
        //     activeOverlayId: 'polygon', // 激活图层
        //     selectable: true, // 开启点选功能
        //     snappable: true // 开启吸附
        // });


    }
    function calculateBoundingBox(center) {
        const EARTH_RADIUS_KM = 6371; // 地球半径，单位为公里
        const DISTANCE_KM = 10; // 我们要找的距离，10公里

        // 将距离转换为弧度
        const distanceRad = DISTANCE_KM / EARTH_RADIUS_KM;

        // 将经度和纬度转换成弧度
        const latRad = center.latitude * (Math.PI / 180);
        const lonRad = center.longitude * (Math.PI / 180);

        // 计算北和南的纬度
        const northLatRad = Math.min(Math.PI / 2, latRad + distanceRad);
        const southLatRad = Math.max(-Math.PI / 2, latRad - distanceRad);

        // 计算东和西的经度时，需要考虑纬度变化时经度线的缩短
        // 这里我们简化处理，只使用赤道处的长度来计算（因为实际计算需要知道每个纬度上的实际距离）
        const eastLonRad = lonRad + Math.atan(distanceRad / Math.cos(latRad));
        const westLonRad = lonRad - Math.atan(distanceRad / Math.cos(latRad));

        // 将弧度转换回角度
        const north = { latitude: northLatRad * (180 / Math.PI), longitude: center.longitude };
        const south = { latitude: southLatRad * (180 / Math.PI), longitude: center.longitude };
        const east = { latitude: center.latitude, longitude: eastLonRad * (180 / Math.PI) };
        const west = { latitude: center.latitude, longitude: westLonRad * (180 / Math.PI) };

        // 由于简化处理，东和西的经度可能超出[-180, 180]的范围，需要归一化
        if (east.longitude > 180) {
            east.longitude -= 360;
        }
        if (west.longitude < -180) {
            west.longitude += 360;
        }

        return { north, south, east, west };
    }
</script>
</body>

<!--</html>-->